<template>
  <div class="nav-bar">
    <div class="nav">
      <ul class="nav-left">
        <li>
          <router-link to="/home">
            <i class="el-icon-s-home" style="color: #e54346; font-size: 18px;"></i>
            首页
          </router-link>
        </li>
        <li>
          <!-- <ul>
            <li>
              <a href="">
                {{ username }}
              </a>
            </li>
            <li><router-link to="myorder">我的订单</router-link></li>
            <li><router-link to="">速递员接单</router-link></li>
          </ul> -->
          <el-dropdown style="cursor: pointer;">
            <span class="el-dropdown-link"> {{ username }}<i class="el-icon-arrow-down el-icon--right"></i> </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><router-link to="/mypage">我的主页</router-link></el-dropdown-item>
              <el-dropdown-item><router-link to="/myorder">我的订单</router-link></el-dropdown-item>
              <el-dropdown-item
                ><router-link to="/selectorder">{{ isDeliveryman ? '速递员接单' : '' }}</router-link></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </li>
        <li>
          <router-link to="/shopcar">
            <i class="el-icon-shopping-cart-2" style="color: #e54346; font-size: 18px;"></i>
            <span style="color: red;">我的购物车</span>
          </router-link>
        </li>
      </ul>

      <ul class="nav-right">
        <li>
          <router-link to="/userlogin">
            <span style="color: red;">{{ username !== '你好' ? '' : '请登录' }}</span>
          </router-link>
        </li>
        <li>
          <router-link to="/userregistration">{{ username !== '你好' ? '' : '免费注册' }}</router-link>
        </li>
        <li>
          <router-link to="/apply">{{ isDeliveryman ? '' : '成为速递员' }}</router-link>
        </li>
        <li>
          <router-link to="/bkhome">进入后台</router-link>
        </li>
        <li @click="logOut">
          <router-link to="javascript:;">退出登录</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import bus from '@/eventBus.js'
import { userInfo } from '@/api/index.js'
export default {
  inject: ['reload'],
  data() {
    return {
      username: '你好',
      isDeliveryman: false
    }
  },
  created() {
    // const id = JSON.stringify(JSON.parse(localStorage.getItem('accessToken')).data)
    // bus.$on('isLogin', () => {
    //   this.getUserInfo('/api/home/userinfo', { id })
    // })
    // this.getUserInfo('/api/home/userinfo', { id })
    if (localStorage.getItem('username')) {
      this.username = localStorage.getItem('username')
      this.isDeliveryman = localStorage.getItem('isDeliveryman')
    }
  },
  beforeDestroy() {
    bus.$off('isLogin')
  },
  methods: {
    logOut() {
      localStorage.removeItem('accessToken')
      localStorage.removeItem('isDeliveryman')
      localStorage.removeItem('username')
      this.reload()
      this.$router.push({ name: 'home' })
    },
    async getUserInfo(url, params) {
      const { data } = await userInfo(url, params)
      this.info = data
      console.log(data)
    }
  }
}
</script>

<style lang="less" scoped>
li {
  list-style: none;
}
a:hover {
  color: #ff4400;
}
* {
  margin: 0;
  padding: 0;
}
.nav-bar {
  user-select: none;
  height: 30px;
  background: #f5f5f5;
  color: #3c3c3c;
  font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
  .nav {
    width: 1100px;
    margin: 0 auto;
    line-height: 32px;
    .nav-left {
      float: left;
      height: 30px;
      li {
        float: left;
        color: #3c3c3c;
        margin-left: 20px;
      }
    }
    .nav-right {
      float: right;
      height: 30px;
      li {
        float: left;
        color: #3c3c3c;
        margin-left: 20px;
      }
    }
  }
}
</style>
